<template>
  <el-container class="layout-container-demo">
    <el-container>
      <el-main>
        <el-scrollbar>
          <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="账号" width="140" />
            <el-table-column prop="password" label="密码" />
            <el-table-column prop="email" label="邮箱" width="200" />
            <el-table-column label="操作" width="200">
              <template #default="scope">
                
                <el-button type="text" @click="view(scope.row)">查看</el-button>
                <el-button type="text" @click="addRow(scope.row)">添加</el-button>
                <el-button type="text" @click="removeRow(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="toolbar">
            <el-button type="primary" @click="addRow()">添加新行</el-button>
            <el-button type="danger" @click="deleteSelectedRows">批量删除</el-button>
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>

  <h2>
    点击总数：<span class="count">{{ count }}</span>
  </h2>
  <el-button type="success" @click="add">+1</el-button>
</template>

<script lang="js" setup>
import { ref, reactive } from 'vue';
import request from '../axios/request.js'
let tableData = ref([]);

const Data = () => request({
  url: 'http://localhost:3100/user/token',
  method: 'get',
  headers: {
    Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwibmFtZSI6InRlc3Q2IiwiZW1haWwiOiJjb2Rpbmc2QDE2My5jb20iLCJwYXNzd29yZCI6IjEyMzQ1NiIsImlhdCI6MTcyNjAyNTA0OCwiZXhwIjoxNzI2MDI4NjQ4fQ.xIg4HnzKRxF_3i9bHNK4HgCbfgxI67pMHZmvSf3fUAk'
  }
}).then(res => {
  console.log("res:",res.data);
  tableData.value = res.data
  
}).catch(err => {
  console.log(err);
})
// console.log(Data);
Data()
console.log("Data:",tableData);



const view = (row) => {
  console.log('查看:', row);
  // 在这里添加查看逻辑
};

const addRow = (row) => {
  if (!row) {
    // 添加新行到表格
    tableData.value.push({
      username: '',
      name: '',
      password: '',
    });
  } else {
    console.log('添加:', row);
    // 在这里添加添加逻辑
  }
};

const removeRow = (row) => {
  // 删除指定行
  tableData.value = tableData.value.filter(item => item !== row);
  console.log('删除:', row);
};


const deleteSelectedRows = () => {
  // 获取选中的行数据
  const selectedRows = tableData.value.filter(row => row.selected);
  // 删除选中的行
  tableData.value = tableData.value.filter(row => !row.selected);
  // 清除选中状态
  tableData.value.forEach(row => (row.selected = false));
  console.log('已删除选中的行');
};

const handleSelectionChange = (selection) => {
  tableData.value.forEach((row, index) => {
    row.selected = selection.includes(row);
  });
};

import { storeToRefs } from 'pinia';

import { count as co } from '../main';
const store = co();
const { count } = storeToRefs(store);
const add = () => {
  store.increment();
};
</script>

<style scoped>
.layout-container-demo {
  height: auto;
  width: auto;
  position: relative;
}

.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: var(--el-color-primary-light-8);
  margin-top: 10px;
}

.layout-container-demo .footer {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
  text-align: center;
}
</style>